<script setup lang="ts">
import {
  getSpaceCategoryList,
  getStyleCategoryList,
  pageExample
} from '@/api/example'
import { nextTick, reactive, ref } from 'vue'
import { category } from './type'
import Example from './example.vue'
import { onLaunch, onShareAppMessage, onShareTimeline ,onLoad} from "@dcloudio/uni-app";
import { shareUtils } from '@/utils/share';
import useShare from '@/mixins/share'
import * as _ from 'lodash'

const {getShareCover} = useShare()
const exampleList = ref([])
const status = ref('loading')
const queryWrapper = reactive({
  pageNumber: 1,
  pageSize: 5,
  keyword: '',
  styleCategoryIdList: [],
  spaceCategoryIdList: []
})
const totalPage = ref(0)
const styleCategoryList = ref([])
const spaceCategoryList = ref([])
const loading = ref(false)
const show = ref(false)

const popUpList = ref([])
const doPageQuery = () => {
  return new Promise((resolve, j) => {
    pageExample(queryWrapper).then((r) => {
      resolve(r)
    })
  })
}
onLoad(() => {


  loading.value = true
  getSpaceCategoryList().then((res) => {
    styleCategoryList.value = res.map((el: any) => {
      el.selected = false
      return el
    })
    return getStyleCategoryList()
  }).then((res)=>{
    spaceCategoryList.value = res.map((el: any) => {
      el.selected = false
      return el
    })
    return doPageQuery()
  }).then((r)=>{
    exampleList.value = r.items
    totalPage.value = r.pageInfo.totalPage
    if (queryWrapper.pageNumber >= totalPage.value) {
      status.value = 'nomore'
    }
  }).finally(()=>{
    nextTick(() => {
      loading.value = false
    })
  })


})

const goToExampleDetailPage = (item) => {
  uni.navigateTo({
    url: `/pages/example/detail?id=${item.id}`
  })
}

const page = getCurrentPages().pop()
let path: string = page.route

const share_path = shareUtils.buildPathQuery(path)
onShareAppMessage(() => {

  const promise = new Promise(resolve => {
    getShareCover(path, null, null).then(res => {

      res.path = share_path

      debugger
      resolve(res)

    })
  })

  return {
    path: share_path,
    imageUrl: null,
    promise
  }
})



onShareTimeline(() => {

  const promise = new Promise(resolve => {
    getShareCover(path, null, null).then(res => {

      res.path = share_path

      debugger
      resolve(res)

    })
  })

  return {
    path: share_path,
    imageUrl: null,
    promise
  }
})


const open = () => {
  show.value = true
}

const close = () => {
  show.value = false
}

const selectStyle = ref([])
const selectSpace = ref([])

const selectTag = (type, id) => {
  if (type == category.space) {
    if (queryWrapper.spaceCategoryIdList.includes(id)) {
      queryWrapper.spaceCategoryIdList =
        queryWrapper.spaceCategoryIdList.filter((el) => {
          return el != id
        })
    } else {
      queryWrapper.spaceCategoryIdList.push(id)
    }
  }

  if (type == category.style) {
    if (queryWrapper.styleCategoryIdList.includes(id)) {
      queryWrapper.styleCategoryIdList =
        queryWrapper.styleCategoryIdList.filter((el) => {
          return el != id
        })
    } else {
      queryWrapper.styleCategoryIdList.push(id)
    }
  }
}

const handleReset = (type) => {
  queryWrapper.styleCategoryIdList = []
  queryWrapper.spaceCategoryIdList = []
}

const handleClose = () => {
  if (loading.value == true) {
    return false
  }
  loading.value = true
  queryWrapper.pageNumber = 1
  return doPageQuery().then((r) => {
    exampleList.value = r.items
    totalPage.value = r.pageInfo.totalPage
    if (queryWrapper.pageNumber >= totalPage.value) {
      status.value = 'nomore'
    }
    nextTick(() => {
      loading.value = false
    })
  })
}

const handleLower = async () => {
  if (queryWrapper.pageNumber >= totalPage.value) {
    return
  }
  if (loading.value == true) {
    return false
  }
  loading.value = true
  queryWrapper.pageNumber++
  const { items, pageInfo } = await doPageQuery()
  totalPage.value = pageInfo.totalPage
  exampleList.value = exampleList.value.concat(items)
  if (queryWrapper.pageNumber >= totalPage.value) {
    status.value = 'nomore'
  }
  nextTick(() => {
    loading.value = false
  })
}

const handleChange = _.debounce(()=>{
  handleClose()
},800)
</script>

<template>
  <view class="layout">
    <ForOneHeader :showLeft="false"  />
    <view class="input-container">
      <u-search
        height="70rpx"
        :showAction="false"
        :clearabled="true"
        placeholder="请输入产品名称/案例名称"
        v-model="queryWrapper.keyword"
        @change="handleChange"
        @search="handleClose"
      ></u-search>
    </view>
    <MidLayout>
      <example
        @select="selectTag"
        @handleReset="handleReset"
        @handleClose="handleClose"
        :styleList="styleCategoryList"
        :spaceList="spaceCategoryList"
        :selectStyle="queryWrapper.styleCategoryIdList"
        :selectSpace="queryWrapper.spaceCategoryIdList"
      ></example>
    </MidLayout>

    <scroll-view scroll-y="true" class="p-3" @scrolltolower="handleLower">
      <MidLayout class="p-2">
        <view class="item" v-for="item in exampleList" :key="item.id">
          <ImageFont @tap="goToExampleDetailPage(item)" :imagePath="item.image">
            <templte #left> {{ item.title }} | {{ item.space }} </templte>

            <template #right> </template>
          </ImageFont>
        </view>
        <view class="load-more-container">
          <u-loadmore :status="status" fontSize="16" />
        </view>
      </MidLayout>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.item {
  margin-top: 20rpx;
}

.drop {
  width: 100%;
}

.input-container {
  padding: 10rpx;
  box-shadow: 0 0 10rpx #333;
  margin-bottom: 15rpx;
}

.layout {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .p-1 {
    height: 100%;
  }

  .p-2 {
    display: flex;
    flex-direction: column;
  }

  .p-3 {
    flex: 1;
    height: 100%;
    overflow: hidden;
  }
}
</style>
